<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>
  <div class="button-container">
    <button @click="goToBeijing()">去到北京</button>
    <button @click="goToUp()">向上移动</button>
    <button @click="goToDown()">向下移动</button>
    <button @click="goToLeft()">向左移动</button>
    <button @click="goToRight()">向右移动</button>


  </div>
  
</template>

<script setup>
// import { View, Map, TileLayer, OSM, fromLonLat } from 'ol';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'


import { onMounted, ref } from 'vue'
var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
onMounted(async () => {
  // 天地图信息
  const map = new Map({
    target: 'openlayersContainer',
    view,
    layers: [
      tdtLayer
    ],
  });
  console.log(Map)
})
const view = new View({
  center: [114.3165, 30.5264],
  zoom: 11,
  projection: 'EPSG:4326'
})
const tdtSourse = new XYZ({
  // 天地图
  url: 'https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
})
const tdtLayer = new TileLayer({
  source: tdtSourse
})
const goToBeijing = () => {
  view.animate({
    center: [116.397428, 39.90923],
    zoom: 12,
    duration: 2000
  })
}
const goToUp = () => {
  const center = view.getCenter();
  view.animate({
    center: [center[0], center[1] + 0.1],
    zoom: 12,
    duration: 2000
  })
  // view.setCenter([center[0], center[1] + 0.1]);
}
const goToDown = () => {
  const center = view.getCenter();
  view.animate({
    center: [center[0], center[1] - 0.1],
    zoom: 12,
    duration: 2000
  })
  // view.setCenter([center[0], center[1] - 0.1]);
}
const goToLeft = () => {
  const center = view.getCenter();
  view.animate({
    center: [center[0] - 0.1, center[1]],
    zoom: 12,
    duration: 2000
  })
  // view.setCenter([center[0] - 0.1, center[1]]);
}
const goToRight = () => {
  const center = view.getCenter();
  view.animate({
    center: [center[0] + 0.1, center[1]],
    zoom: 12,
    duration: 2000
  })
  // view.setCenter([center[0] + 0.1, center[1]]);
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}
.button-container{
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
